<template>
	<view>
		<msForm 
		:config='formCF' 
		:formValueMain= 'formValueMain' 
		:formValueSub = 'formValueSub'
		></msForm>
		 <!-- @searchEvent = "searchEvent" -->
	</view>
</template>

<script>
	import msForm from '@/components/form/form.vue'
	import cf from '@/common/config.js'
	export default {
		components: {
			msForm,
		},
		data() {
			return {
				formCF: {},
				formValueMain: {},
				formValueSub: []
			};
		},
		onLoad(p) {
			this.$utils.setPageTitle(p.title)
			let configSource = {};
			switch (p.type) {
				case 'M1015':
					configSource = this.mapConfig(cf.move.menu01.add.params);
					break;
				default:
					break;
			}

			this.formCF = { ...configSource };
			this.formValueMain = JSON.parse(JSON.stringify(configSource.mainVal)) ;
			let t = [JSON.parse(JSON.stringify(configSource.subVal))];
			t.push(JSON.parse(JSON.stringify(configSource.subVal)))
			this.formValueSub = t ;
			// console.log(JSON.stringify(this.formCF));
		},

		methods: {
			mapConfig(data) {
				let d = {
					mainTB: [],
					subTB: [],
					mainVal: {},
					subVal: {}
				}
				data.forEach(item => {
					if (item.groupID == 1) {
						d.mainTB.push(item)
						d.mainVal[item.id] = item.default || ''
						if (item.control == 'ExEnum') {
							d.mainVal[item.id + 'Index'] = 0
						}
					} else {
						d.subTB.push(item)
						d.subVal[item.id] = item.default || ''
						if (item.control == 'ExEnum') {
							d.subVal[item.id + 'Index'] = 0
						}
					}
				})
				return d;
			}
		}

	}
</script>

<style lang="scss">
	page {
		padding-bottom: 110rpx;
	}

	.mian-table {
		background-color: #FFFFFF;
		color: #555555;

		.main-table-title {
			margin-top: 20rpx;
			padding: 30rpx 24rpx;
			border-bottom: 1rpx solid #F1F1F1;

			.mian-table-name {
				font-weight: 800;
				font-size: 32rpx;
				position: relative;
				padding-left: 40rpx;
			}

			.mian-table-name:before {
				content: "";
				width: 10rpx;
				height: 32rpx;
				line-height: 32rpx;
				position: absolute;
				margin: 0 16rpx;
				border-radius: 10rpx;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				background-color: #1677FF;
			}
		}


		.mian-table-content {
			padding: 0 30rpx;
		}
	}

	.table-row {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #F1F1F1;
		align-items: center;

		.row-label {
			flex: 0 0 150rpx;
		}

		input {
			flex: 1;
		}
	}

	.table-row:focus-within {
		border-bottom: 1rpx solid #1677FF;
	}

	.sub-table {
		color: #555555;

		.sub-table-title {
			background-color: #FFFFFF;
			display: flex;
			margin-top: 20rpx;
			padding: 30rpx 24rpx;
			border-bottom: 1rpx solid #F1F1F1;
			justify-content: space-between;
			align-items: center;

			.sub-table-title-name {
				font-weight: 800;
				font-size: 32rpx;
				position: relative;
				padding-left: 40rpx;
			}

			.sub-table-title-name:before {
				content: "";
				width: 10rpx;
				height: 32rpx;
				line-height: 32rpx;
				position: absolute;
				margin: 0 16rpx;
				border-radius: 10rpx;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				background-color: #1677FF;
			}

			.dicon {
				font-size: 50rpx;
				margin: 0 10rpx;
			}
		}

		.sub-table-content {
			margin-top: 20rpx;
			background-color: #FFFFFF;
			padding: 0 30rpx;
		}

	}

	.operation {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		background-color: #FFFFFF;
		box-shadow: 0 0 10rpx #AAAAAA;

		.operation-button {
			flex: 1;
			text-align: center;
			position: relative;
		}

		.border-right:after {
			content: '';
			width: 2rpx;
			height: 40rpx;
			position: absolute;
			top: 30rpx;
			right: 0;
			display: inline-block;
			background-color: #ddd;
		}
	}
</style>
